{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.css' | asset_url | stylesheet_tag }}
{{ 'product-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
<script src="{{ 'modal-product.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form-600.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'iscroll-probe.js' | asset_url }}"></script>

<style>
  .modal-product .coupons_metafields {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 2;
  }
  .modal-product .sale_icon {
    padding: 2px 6px;
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 166.667% */
    background: linear-gradient(180deg, #DD4146 0%, #BC1C21 100%), linear-gradient(180deg, #E96C71 0%, #D34A4F 100%);
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
    vertical-align: middle;
  }
  
  .modal-product .variant_sale_icon {
    position: absolute;
    top: -16px;
    right: -12px;
    display: inline-block;
  }
  .modal-product .variant_sale_content {
    font-size: 12px;
    transform: scale(0.5);
    position: absolute;
    top: 3px;
    left: -1px;
    color: #fff;
    font-weight: normal;
  }
  
  @media screen and (min-width: 901px) {
    .coupons_metafields-for-mobile {
      display: none;
    }
  }
  
  .product-sale {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .product-sale-value {
    position: absolute;
    top: 23px;
    left: 55px;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    color: #BC1C21;
  }
  .product-sale-m {
    display: none;
  }
  
  @media screen and (max-width: 900px) {
    .modal-product .sale_icon {
      padding: 2px 6px;
      color: #FFF;
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
      line-height: 20px; /* 166.667% */
      background: linear-gradient(180deg, #DD4146 0%, #BC1C21 100%), linear-gradient(180deg, #E96C71 0%, #D34A4F 100%);
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 15px;
      margin-top: 15px;
      vertical-align: middle;
    }
    .product-sale {
      display: none;
    }
    .product-sale-m {
      display: block;
      line-height: 1;
      margin-top: 15px;
    }
    .product-sale-m span {
      color: #BC1C21;
      border-radius: 15px;
      background: #FFE3E4;
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
      padding: 2px 10px;
      line-height: 20px; /* 166.667% */
    }

    .coupons_metafields-for-pc {
      display: none;
    }
    .modal-product .coupons_metafields {
      width: 100%;
      position: static;
      margin: 15px 0 0;
    }
    .modal-product .mata_coupons {
      justify-content: left;
    }
    .mata_coupons .ar_blue {
      position: static;
    }
  }
  
  .modal-product .coupons_metafields .mata_coupons svg rect {
    fill: #f7f4f4;
  }
  
  #size_on .form__label, .modal-product #size_label {
    display: none;
  }
  .product-popup-modal input {
    font-size: 16px !important;
  }
  .cgo-title:empty {
    display: none;
  }
  .menu-section-list-container {
    position: sticky;
    top: 0;
    z-index: 1001; 
  }
  .modal-product .price__badge-sold-out, .modal-product .price__badge-sale {
    display: none !important;
  }
  
  .modal-product .cgo-title .des {
    color: #8d8d8d;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
  }
  .modal-product .product__info-wrapper fieldset.product-form__input .form__label, 
  .modal-product .size_one {
    margin-bottom: 14px;
    color: #8d8d8d!important;
    font-weight: 600;
    font-size: 14px;
  }
  .extra-exclusive {
    border-radius: 4px;
    background: #E8F2FF;
    padding: 0 6px;
    line-height: 26px;
    display: inline-block;
    color: var(--web-primary-color-100, #2F80ED);
    font-family: Montserrat;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.2px;
    margin-bottom: 10px;
    vertical-align: top;
    margin-right: 12px;
  }
  .menu-section-list {
    display: block;
    margin-top: 0;
  }
  .menu-section-list{
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 100;
    background: #000;
  }
  .overflow-modal-hidden {
    overflow: hidden;
  }
  .modal-hidden {
    visibility: hidden;
  }
  .modal-product {
    background: #fff;
    width: 100%;
    display: block;
    position: absolute;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .modal-product .product {
    color: rgba(var(--color-foreground),.75);
  }
  
  .modal-product .close {
    position: sticky;
    width: 25px;
    height: 25px;
    top: 25px;
    right: 25px;
    float: right;
    cursor: pointer;
  }
  .modal-arrow {
    position: relative;
    top: -19px;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #fff;
  }
  .modal-product .is-sticky {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    z-index: 1001;
    margin: 0!important;
    border: 1px solid #CCCCCC;
    padding: 8px 0; 
  }
  
  .modal-product .is-sticky .sticky-left {
    display: flex;
    flex-direction: column;
  }
  .modal-product .product {
    align-items: unset;
    width: 100%;
    justify-content: space-between;
  }
  .modal-product .product__info-container {
    overflow: hidden;
  }
  
  .modal-product .product__media-wrapper{
    position: relative;
  }
  
  .modal-product .product:not(.product--no-media):not(.featured-product) .product__media-wrapper{
    max-width: 660px;
    padding: 0;
  }
  
  .modal-product .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    max-width: 40%;
    width: 40%;
  }
  .modal-product .product__info-wrapper:empty {
    margin: 0;
    padding: 0;
    display: none;
  } 
  
  .media-title-list {
    display: none!important; 
  }
  .modal-product .slider-container {
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }
  .modal-product .slider-container slider-component {
    position: relative;
    display: block;
  }
  
  .modal-product .slider-container slider-component li {
    width: 76px;
    border-radius: 8px;
    background: #F7F7F7;
    border: 2px solid transparent;
  }
  
  .modal-product .slider-container slider-component li:hover {
    border: 2px solid #D5E6FB;
  }
  
  .modal-product .slider-container slider-component li.active-thumb {
    border: 2px solid #2F80ED;
  }
  
  .modal-product .slider-container slider-component li  img {
    display: block;
  }
  .modal-product .product__modal-opener {
    padding: 0 100px;    
  }
  .modal-section {
    height: 100%;
  }
  .modal-product .slider-container {
    display: flex;
  }
  .modal-product .price__regular .price-item {
    font-size: 30px;
    line-height: 44px;
    font-weight: 700;
  }
  .modal-product .product .price {
    border: none;
  }
  .modal-product .cgo-title .des {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    padding-top: 1rem;
  }
  .modal-product .cgo-title .des:empty {
    display: none;
  }
  .modal-product .product__description li {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    list-style: none;
    color: #8d8d8d;
  }

  .modal-product .product__description li::before {
    content: '\2022'; 
    color: #8d8d8d;
    font-size: 20px;
  }
  
  .modal-product .list-payment {
    justify-content: flex-start;
    margin: 1.6rem 0;
  }
  
  .modal-product .product-slider-box {
    justify-content: center;
  }
  
  .modal-product .product-slider-box li:nth-child(n+5) {
    display: none;
  }
  
  .modal-product .product-form__input {
    margin: 0 0 2rem 0;
    position: relative;
  }
  .modal-product .product-form__input input[type='radio'] {
    position: absolute;
    top: 0;
  }
  
  .modal-product .product-form__input input[type='radio'] + label {
    position: relative;
    border: 2px solid transparent;
    border-radius: 47px;
    background: #F7F7F7;
    font-size: 16px;
    padding: 0.8rem 3rem;
    margin: 0 1rem 0 0;
  }
  .modal-product  .product-form__input input[type=radio]+label.cs_label {
    padding: 2px;
    margin: 0;
    background: none;
    border: 2px solid transparent;
    margin-right: 8px;
    display: block;
    width: 28px;
    float: left;
  }
  .modal-product .product-form__input input[type='radio']:hover + label {
    border: 2px solid #D5E6FB;
    color: #2F80ED;
    background: #F4F8FC;
  }
  
  .modal-product .product-form__input input[type='radio']:checked + label {
    color: #2F80ED;
    font-weight: 700;
    border: 2px solid #2F80ED;
    background: #F4F8FC;
  }
  
  .modal-product .product-form__input input[type=radio]:hover + label.cs_label {
    border: 2px solid #D5E6FB;
    color: #2F80ED;
    background: #F4F8FC;
  }
  .modal-product .product-form__input input[type=radio]+label.cs_label img {
    display: block;
    height: 20px;
    width: 20px;
  }
  .modal-product  .product-form__input input[type=radio]:checked+label.cs_label {
    border: 2px solid #2F80ED;
    color: #2F80ED;
    background: #F4F8FC;
  }
  
  .modal-product .shipping_metafields {
    display: flex!important;
    align-items: center;
  }
  
  
  /* product thumb */
  .product__modal-thumbs {
    position: relative;
  }
  .product__media-thumbs {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .product__media-thumbs__handle {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: #E6E6E6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    outline: none;
    user-select: none;
  }
  .product__media-thumbs__handle:hover {
    background: #cdcdcd;
  }
  .product__media-thumbs__next {
    margin-left: 2%;
  }

  .product__media-thumbs__prev {
    margin-right: 2%;
  }
  
  /** price **/
  .modal-product .price-item.price-item--sale {
    font-size: 30px; 
    line-height: 44px;
    font-weight: 700;
    color: #333;
  }

  .modal-product .price__compare .price-item--regular {
    font-weight: 400!important;
    font-size: 16px!important;
    line-height: 22px!important;
    color: #8d8d8d!important;
  }
  
 
  
  .modal-product .price__compare .price-item--regular {
    /* display: none; */
  }
  
  .go-back {
    display: none; 
  }
  
  /** mobile model product start **/
  .overflow-hidden {
    overflow: hidden; 
  }
  .position_sticky .name {
    position: relative;
  }
  .position_sticky .name .btn {
    position: absolute;
    right: 0;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease;
  }
  
  .mobile-model-product-body .position_sticky {
    position: relative;
    padding: 0;
  }
  .mobile-model-product-body .position_sticky .go-back {
    position: absolute;
    display: block;
    height: 48px;
    background: #000;
    width: 100%;
    line-height: 48px;
    top: 0;
    z-index: 9;
    background: #1A1A1A;
    padding: 0 26px;
    visibility: hidden;
    opacity: 0;
    transition-property: visibility, opacity;
    transition-duration: .7s;
    transition-timing-function: ease;
  }
  
  .mobile-model-product-body .position_sticky .go-back-icon {
    position: absolute;
    left: 50%;
    visibility: hidden;
    opacity: 0;
    transition-property: left, visibility, opacity;
    transition-duration: .7s;
    transition-timing-function: ease;
  }
  
  .mobile-model-product-body .position_sticky.active .go-back-icon {
    left: 26px;
    visibility:visible;
    opacity: 1;
  }
  
  .mobile-model-product-body .position_sticky.active .name .btn {
    right: 70%;
  }
  
  .mobile-model-product-body .position_sticky.active .go-back {
    transform: translateX(0);
    visibility:visible;
    opacity: 1;
  }
  .mobile-model-product-body .product__media-thumbs {
    display: none;
  }
  .mobile-model-product-body .modal-product .product__modal-opener {
    padding: 0;
  }
  
  .mobile-model-product {
    display: flex;
    justify-content: flex-end;
    transition-property: opacity;
    transition-duration: 1s;
    transition-timing-function: ease;
    background: #fff;
    opacity: 0;
    position: static;
    visibility: hidden;
  }
  .mobile-model-product.active {
    opacity: 1;
    visibility: visible;
  }
  .mobile-model-product .close {
    display: none;
  }
  
  .product-dialog-select {
    display: none;
  }
  
  .page .menu-section-list-container .product-popup-modal__content {
    width: max-content;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 12px;
    height: auto;
    margin: 0;
    padding: 0;
  }
  
  .page .menu-section-list-container .product-popup-modal__toggle {
    padding: 0;
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .page .menu-section-list-container .product-popup-modal__content-info {
    padding-right: 0;
  }
  .modal-product .sale_icon {
    padding: 2px 6px;
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 166.667% */
    background: linear-gradient(180deg, #DD4146 0%, #BC1C21 100%), linear-gradient(180deg, #E96C71 0%, #D34A4F 100%);
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
  }
  
  .modal-product .showcase {
    position: absolute;
    top: -50px;
  }
  .modal-product .showcase img {
    width: 147px;
    height: 68px;
  }
  
  .modal-product .large-image, .modal-product .slider-container {
    overflow: unset;
  }
  
  
  @media screen and (min-width: 991px) {
    .modal-product .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
      padding-top: 50px;
      padding-bottom: 112px;
    }
    .model-product-title {
      display: none;
    }
    .product__media-wrapper__container {
      position: sticky;
      top: 102px;
    }
    .menu-section-list .product-nav-header {
      padding-top: 10px;
    }
  }
  
  
  @media screen and (max-height: 900px) {
    .modal-product .showcase {
      top: -30px;
    }
  }
  
  @media screen and (max-height: 800px) {
    .product__media-item:first-child {
      width: 75%;
      margin: 0 auto;
    }
     .product__media-item .grid--1-col .grid__item {
      max-width: 75%;
    }
    
    .modal-product .showcase {
      top: -10px;
    }
    
    .modal-product .showcase img {
      width: 100px;
      height: 43px;
    }
    
  }
  /** mobile model product end **/
  
  @media screen and (max-width: 990px) {
    .modal-product .showcase {
      position: absolute;
      top: 12px;
      left: -50px;
    }
    .modal-product .showcase img {
      width: 86px;
      height: 40px;
    }
    .modal-product .sale_icon {
      padding: 2px 6px;
      color: #FFF;
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
      line-height: 20px; /* 166.667% */
      background: linear-gradient(180deg, #DD4146 0%, #BC1C21 100%), linear-gradient(180deg, #E96C71 0%, #D34A4F 100%);
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 15px;
      margin-top: 15px;
    }
    .modal-product .cgo-title .des {
      margin-bottom: 15px;
      font-size: 14px; 
      line-height: 18px;
    }
    .modal-product .product-form__input input[type='radio'] + label {
      font-size: 1.2rem;
    }
    .modal-product .shipping_metafields, .is-sticky .service {
      font-size: 12px;
      display: block;
      line-height: 12px;
    }
    .modal-product .sticky-left .service {
      top: 0;
    }
    .modal-product {
      position: fixed;
    }
    
    .mobile-model-product {
      transition-property: opacity, transform, visibility;
      transition-duration: 1s;
      transition-timing-function: ease;
      background: #fff;
      opacity: 0;
      visibility: hidden;
      left: 0;
      transform: translate(100%);
    }
    .mobile-model-product.active {
      transform: translate(0);
    }
    .page .menu-section-list-container .product-popup-modal__content {
      width: 95%;  
    }
    
    .position_sticky .product-nav-header {
      padding: 10px 26px; 
    }
    .modal-product .is-sticky {
      padding: 10px 20px;
    }
    .modal-product .price-item.price-item--sale, .modal-product .price__regular span.price-item.price-item--regular {
      color: var(--grey-100, #333);
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px;
      letter-spacing: 0;
    }
    .modal-product .price--on-sale .price__sale {
      position: relative;
    }
    
    .modal-product .sticky-right .price {
      display: none;
    }
    
    .modal-product .product__media-wrapper__container .price--on-sale .price__sale .price__compare {
      position: absolute;
      right: 0;
    }
    
    .model-product-closed .modal-product .product__media-wrapper__container .price--on-sale .price__sale .price__compare {
      opacity: 0;
    }
    .modal-product .product__info-container--sticky {
      padding-bottom: 15px;
    }
    .model-product-overflow-hidden .modal-product{
      overflow: hidden;
    }
    .model-product-closed .modal-section {
      overflow: hidden;
    }
    .model-product-closed .modal-product.modal-product-scroll-up {
      overflow: hidden;
    }
    
    .position_sticky-menu-mobile {
      height: 4.8rem;
    }
    .modal-product .product {
      padding: 0;
    }
    .modal-product .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
      max-width: 100%;
      width: 100%;
      padding: 0 26px 26px;
    }
    
    .modal-product .product__info-wrapper .product-title-pc {
      display: none;
    }
    .modal-product .product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
      background-color: #fff;
      z-index: 1000;
      padding: 0;
    }
    
    .modal-product.modal-product-scroll-up .product__media-wrapper {
    }
    
    .modal-product .slider-container {
      width: 302px;
      padding: 0 26px;
    }
    .modal-product .slider-container slider-component {
      opacity: 1;
    }
    
    .modal-product.modal-product-scroll-up .slider-container slider-component {
      opacity: 0;
      /* visibility: hidden; */
      transition: opacity 1s ease;
    }
    .modal-product.modal-product-scroll-up .product__info-wrapper {
      padding-bottom: 2rem;
    }
    .modal-product .model-product-title {
      padding: 0 26px;
      width: 100%;
    }
    
    .modal-product .separate-line {
      width: 100%;
      visibility: hidden;
      opacity: 0;
      padding: 0 26px;
    }
    .separate-line::after {
      content: '';
      background: #e6e6e6;
      height: 1px;
      width: 100%;
      display: block;
    }
    .modal-product.modal-product-scroll-up .model-product-title {
      /* max-width: 30rem; */
      left: 0;
      top: 0 !important;
      padding-right: 0;
    }
    
    .modal-product .cgoTitle p {
      margin: 0;
      padding: 17px 0 15px;
      font-size: 20px;
      /* transition: font-size 1s ease; */
    }
    
    .modal-product.modal-product-scroll-up .cgoTitle p {
      color: var(--grey-100, #333);
      font-family: Montserrat;
      font-size: 16px;
      font-style: normal;
      line-height: 28px; /* 200% */
      padding: 10px 0 0;
      margin: 0 !important;
    }
    
    .modal-product.modal-product-scroll-up .tenways-fietstest {
      opacity: 0;
      transition: opacity 1s ease;
    }
    
    .modal-product .large-image {
      overflow: unset;
    }
    
    .modal-product .tenways-fietstest {
      top: 0;
      left: 0;
      opacity: 1;
    }
    .modal-product .tenways-fietstest svg {
      width: 50px;
    }
    .modal-product .slider-container slider-component {
      opacity: 1;
    }
    
    .modal-product.modal-product-scroll-up slider-component {
      opacity: 0;
      transition: opacity 1s ease;
    }
    .modal-product .slider-container slider-component li {
      width: 6px;
      height: 6px;
      background: #D9DEE2;
      margin: 0.5rem;
    }
    .modal-product.modal-product-scroll-up .slider-container slider-component li{
      width: 4px;
      height: 4px;
      margin: 0.3rem;
      transition: all 1s ease;
    }
    .modal-product .slider-container slider-component li.active-thumb {
      background: #4D4D4D;
      border: 2px solid #4D4D4D;
    }
    .modal-product .slider-container slider-component li img {
      display: none;
    }
    
    .menu-section-list-container {
      position: sticky;
      top: 0;
      z-index: 1001; 
    }
    
    .dialog-product-overflow-hidden {
      overflow: hidden;
    }
    
    .product-dialog-select {
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 1003;
      top: 0;
      display: none;
    }
    .dialog-product-overflow-hidden .product-dialog-select {
      display: block;
    }
    
    .product-dialog-select__container {
      height: 300px;
      width: 100%;
      padding: 0 26px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .product-dialog-select__container-overlay {
      background: #4D4D4D;
      height: 100%;
      width: 100%;
      opacity: 0.3;
    }
    .product-dialog-select__container-inner {
      background: #fff;
      border-radius: 4px;
      height: 100%;
    }
    .product-dialog-select__container-close {
      height: 50px;
      width: 50px;
      background: #fff;
      margin: 20px auto;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    
    .product-dialog-select__container-inner__thumb .product-slider {
      width: 6px;
      height: 6px;
      background: #D9DEE2;
      border-radius: 50%;
    }
    .product-dialog-select__container-inner__thumb .product-slider.active-thumb {
      background: #4D4D4D;
    }
    .product-dialog-select__container-inner__image .large-image-item {
      width: 80%;
      margin: 0 auto;
    }
    .product-dialog-select__container-inner__thumb .product-slider-box {
      display: block;
      text-align: center;
    }
    .product-dialog-select__container-inner__image .tenways-fietstest {
      top: 1rem;
    }
    
    .modal-product .sticky-left {
      overflow: hidden;
    }
    .extra-exclusive {
      margin-top: 15px;
      margin-bottom: 0;
    }
  }
</style>
<script>
  window.onload = (event) => {
    document.querySelector("li.slide-image-handler:nth-child(1)").classList.add('active-thumb');
  };
</script>
{%
  assign product = section.settings.product
%}
<dialog-product class="product-dialog-select">
  <div class="product-dialog-select__container-overlay"></div>
  <div class="product-dialog-select__container">
    <div class="product-dialog-select__container-inner">
      <div class="product-dialog-select__container-inner__image">
        <div>
          <ul class="large-image" id="dialog-large-image">
            {%- for media in product.media -%}
              {%- assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' -%}
              {%- if product.selected_or_first_available_variant.featured_media != null -%}
                {%- assign media = product.selected_or_first_available_variant.featured_media -%}
                <li product-media="{{ media.alt }}" class="dialog-product__media-item-handler large-image-item product__media-item grid__item slider__slide {% if media.media_type != 'image' %} hide-modal {% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
                  {% 
                    render 'product-slider',
                    media: media,
                    position: forloop.index,
                    shipping:section.settings.shipping,
                    loop: section.settings.enable_video_looping,
                    feature1:section.settings.feature1,
                    feature2:section.settings.feature2,
                    feature3:section.settings.feature3,
                    modal_id: section.id,
                    xr_button: true,
                    thumb: true
                  %}
                </li>
              {%- endif -%}  
              <li product-media="{{ media.alt }}" class="large-image-item product__media-item grid__item slider__slide {% if media.media_type != 'image' %} hide-modal {% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
                {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}   
                  {% 
                    render 'product-slider',
                    media: media,
                    position: forloop.index,
                    shipping:section.settings.shipping,
                    loop: section.settings.enable_video_looping,
                    feature1:section.settings.feature1,
                    feature2:section.settings.feature2,
                    feature3:section.settings.feature3,
                    modal_id: section.id,
                    xr_button: true,
                    thumb: true
                  %}
                {%- endunless -%} 
              </li>
            {%- endfor -%}
          </ul>
        </div>
      </div>
      <div class="product-dialog-select__container-inner__thumb">
        <ul class="product-slider-box slider" role="list">
          {%- assign variant_images = product.images| where: 'attached_to_variant?', true | map: 'src' -%}
          {%- for media in product.media -%}
            <li
              dialog-thumbnail-color="{{ media.alt }}"
              class="product-slider slider__slide dialog-slide-image-handler"
              data-media-id="{{ section.id }}-{{ media.id }}"
              {% if section.settings.hide_variants and variant_images contains media.src %}
                style="display: none;"
              {% endif %}
            >
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
    <div class="product-dialog-select__container-close" id="dialog-product-close">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
        <path d="M1 13L13 1" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M4.5 4.5L1 1" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M13 13L9.5 9.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
</dialog-product>
<menu-section-list class="menu-section-list">
  <div class="position_sticky" id="position_sticky">
    <div class="go-back" id="go-back-btn">
      <span class="go-back-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14" fill="none">
          <path d="M15.3427 6.57331H1.95233L8.25925 0.967319C8.47704 0.773734 8.49665 0.440276 8.30308 0.222498C8.10954 0.00473751 7.7761 -0.014923 7.5583 0.17868L0.315744 6.61626C0.203104 6.71638 0.138672 6.85989 0.138672 7.01059C0.138672 7.16129 0.203104 7.3048 0.315744 7.40492L7.55828 13.8425C7.65878 13.9319 7.7839 13.9758 7.90856 13.9758C8.05403 13.9758 8.19886 13.916 8.30307 13.7987C8.49665 13.5809 8.47704 13.2475 8.25923 13.0539L2.16239 7.63459H15.3427C15.6341 7.63459 15.8703 7.39531 15.8703 7.10395C15.8703 6.81258 15.6341 6.57331 15.3427 6.57331Z" fill="white"/>
        </svg>
      </span>
    </div>
    <div class="page-width position_sticky-menu-mobile" id="position_sticky-menu">
      <div class="product-nav-header" id="product-nav-header"> 
        <div class="name">
          <div class="name_text">
            {% if section.settings.richtext != blank  %}
              {{ section.settings.richtext }}
            {% else %}
            <a href="{{ section.settings.url }}" >
              {{ section.settings.icon }}
            </a>
            {% endif %}
          </div>
          <div class="m_icon hidden">
            <span class="menu-down">{% render 'footer-down' %}  </span>
          </div>
          <ul class="btn hidden">
            <li class="last_btn">
              <a class="order_now_button modal-product-tag line-hover header__menu-item header__menu-item list-menu__item link link--text focus-inset" href="javascript:void(0)" alt >
                <span>{{ section.settings.order_now }}</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <nav id="my-header" class="header__inline-menu">
        <ul id="my-awesome-nav" class="list-menu list-menu--inline list-inline" role="list">
          <li>
            <a href="{{ routes.root_url }}">{{ section.settings.home | escape }}</a>
          </li>
          {%- for block in section.blocks -%}
            {% case block.type %}
              {% when 'column' %}
                <li data-scroll {{ block.shopify_attributes }}>
                  <a class="line-hover header__menu-item header__menu-item list-menu__item link link--text focus-inset"{% if block.settings.button_link == blank %} aria-disabled="true"  role="link"{% else %} href="{{ block.settings.button_link }}"{% endif %}>
                    {% if block.settings.button_label != blank %}
                      <span> {{ block.settings.button_label | escape }}</span>
                    {% endif %}
                  </a>
                </li>
            {% endcase %}
          {%- endfor -%}
          <li class="last_btn">
            {%  if section.settings.redirect_type == 'link' %}  
              <a {% if section.settings.order_now != blank %}  class="line-hover header__menu-item header__menu-item list-menu__item link link--text focus-inset" href="{{ section.settings.order_now_url }}" {% endif %} alt >
                <span>
                  {{ section.settings.order_now }}
                </span>
              </a>
            {% else %}
              <a class="order_now_button modal-product-tag line-hover header__menu-item header__menu-item list-menu__item link link--text focus-inset" href="javascript:void(0)" alt >
                <span>
                  {{ section.settings.order_now }}
                </span>
              </a>
              <div class="modal-product-collection modal-arrow modal-hidden"></div>
            {% endif %}
          </li>
        </ul>
      </nav>
    </div>
    
    <modal-product id="model-product" class="modal-product modal-hidden modal-product-collection">
      <div class="close" id="modal-product-close">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <rect width="24" height="24" fill="white"/>
          <path d="M6 18L18 6" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M18 18L6 6" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      
      <section class="page-width modal-section">
        <div class="product grid grid--1-col">
          <div class="grid__item product__media-wrapper">
            <div class="product__media-wrapper__container" id="product__media-handler">
              {% if section.settings.product_sale == true  %}
                <div class="product-sale">
                  {% render 'product-sale' %}
                  <span class="product-sale-value">{{ section.settings.product_sale_value }}</span>
                </div>
              {% endif %}
              {%  if section.settings.product_sale == false and section.settings.show_season_sale == true %}
                <div class="coupons_metafields coupons_metafields-for-pc">
                  {%- form 'localization', id: 'FooterCountryForm' -%}
                    {% if localization.country.iso_code == 'GB' %}  
                      <div id="coupons-{{ section.id }}" class="easter-discount">   
                        {%- assign product_form_id = 'product-form-' | append: section.id -%}                         
                        {% for variant in product.variants %}
                            {% if product.selected_or_first_available_variant.id == variant.id %}
                                {% if variant.metafields.custom.coupons !=blank %}
                                <div class="mata_coupons us-coupons">
                                  <div class="discount_icon">
                                    £300
                                  </div>
                                  {% render "icon-coupons" %}
                                  <div class="ar_blue">
                                    {{ variant.metafields.custom.coupons }}
                                    <span>
                                      £300 OFF
                                    </span>
                                  </div>
                                </div>
                                {% endif %}
                            {% endif %}
                          {%- endfor -%}
                      </div>   
                    {% else %}   
                      <div id="couponseu-{{ section.id }}" class="easter-discount coupons_metafields">   
                        {%- assign product_form_id = 'product-form-' | append: section.id -%}                         
                        {% for variant in product.variants %}
                            {% if product.selected_or_first_available_variant.id == variant.id %}
                                {% if variant.metafields.custom.coupons_eu !=blank %}
                                <div class="mata_coupons us-coupons">
                                  <div class="discount_icon">
                                    €300
                                  </div>
                                  {% render "icon-coupons" %}
                                  <div class="ar_blue">
                                    {{ variant.metafields.custom.coupons_eu }}
                                    <span>
                                      €300 OFF
                                    </span>
                                  </div>
                                </div>
                                {% endif %}
                            {% endif %}
                          {%- endfor -%}
                      </div>   
                    {% endif %}                      
                  {%- endform -%}
                </div>
              {% endif %}
              <div class="slider-container" id="slider-container-handler">
                <ul class="large-image" id="large-image">
                  {%- for media in product.media -%}
                    {%- assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' -%}
                    {%- if product.selected_or_first_available_variant.featured_media != null -%}
                      {%- assign media = product.selected_or_first_available_variant.featured_media -%}
                      <li product-media="{{ media.alt }}" class="product__media-item-handler large-image-item product__media-item grid__item slider__slide {% if media.media_type != 'image' %} hide-modal {% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
                        {% if forloop.index == 1 or forloop.index == 6 or forloop.index == 11 or forloop.index == 16 %}
                          {%- for block in section.blocks -%}
                            {%- case block.type -%}
                              {%-  when 'showcase' -%}
                                {% if block.settings.image != blank %}
                                <span class="showcase">
                                  <img
                                    srcset="{{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                                    src="{{ block.settings.image }}"
                                    alt="{{ block.settings.image.alt }}"
                                    height="{{ block.settings.image.height }}"
                                    width="{{ block.settings.image.width }}"
                                    loading="lazy"
                                  >
                                </span>
                                {% endif %}  
                            {% endcase %}
                          {% endfor %}
                        {% endif %}
                        {% 
                          render 'product-slider',
                          media: media,
                          position: forloop.index,
                          shipping:section.settings.shipping,
                          loop: section.settings.enable_video_looping,
                          feature1:section.settings.feature1,
                          feature2:section.settings.feature2,
                          feature3:section.settings.feature3,
                          modal_id: section.id,
                          xr_button: true,
                          thumb: true
                        %}
                      </li>
                    {%- endif -%}  
                    <li product-media="{{ media.alt }}" class="{{ forloop.index }} large-image-item product__media-item grid__item slider__slide {% if media.media_type != 'image' %} hide-modal {% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
                      {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}   
                        {% 
                          render 'product-slider',
                          media: media,
                          position: forloop.index,
                          shipping:section.settings.shipping,
                          loop: section.settings.enable_video_looping,
                          feature1:section.settings.feature1,
                          feature2:section.settings.feature2,
                          feature3:section.settings.feature3,
                          modal_id: section.id,
                          xr_button: true,
                          thumb: true
                        %}
                      {%- endunless -%} 
                    </li>
                  {%- endfor -%}
                </ul>
                
                <slider-component>
                  <ul class="product-slider-box slider" id="product-slider-box" role="list">
                    {%- assign variant_images = product.images| where: 'attached_to_variant?', true | map: 'src' -%}
                    {%- for media in product.media -%}
                      <li thumbnail-color="{{ media.alt }}" class="product-slider slider__slide slide-image-handler" onclick="newLargeImage(this)" data-media-id="{{ section.id }}-{{ media.id }}"
                        {% if section.settings.hide_variants and variant_images contains media.src %} style="display: none;" {% endif %}
                      >
                        {% if media.media_type == 'video' %}
                          <div class="video-btn" style="display: block" >
                            <span class="product__media-icon motion-reduce v-btn" aria-hidden="true">
                              {%- liquid
                                case media.media_type
                                when 'video' or 'external_video'
                                render 'icon-play'
                                when 'model'
                                render 'icon-3d-model'
                                else
                                render 'icon-zoom'
                                endcase
                              -%}
                            </span>
                            <img class="lazyload slide-image" src="{{ media.preview_image | img_url: 'large' }}" alt="{{ media.alt }}">
                          </div>
                        {% else %}
                          <img class="lazyload slide-image" src="{{ media.preview_image | img_url: 'large' }}" alt="{{ media.alt }}">
                        {% endif %}
                      </li>
                    {% endfor %}
                  </ul>
                </slider-component>
              </div>
              <div class="model-product-title">
                {%- for block in section.blocks -%}
                  {%- case block.type -%}
                  {%- when 'text' -%}
                    <div class="cgo-title" id="model-product-title">
                      <div class="cgoTitle">
                      {{- block.settings.richtext -}}
                      </div>
                    </div>
                  {%- when 'price' -%}
                    <div class="no-js-hidden tenways-price product-price-handler" id="price-{{ section.id }}" {{ block.shopify_attributes }}>
                      {%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large', price_type: 'compare_last' -%}
                    </div>
                  {% endcase %}
                {% endfor %}
              </div>
              <div class="separate-line"></div>
            </div>
          </div>
          <div class="product__info-wrapper grid__item" id="scroll-container">
            <div id="scroller">
              <div id="ProductInfo-{{ section.id }}" class="product__info-container{% if section.settings.enable_sticky_info %} product__info-container--sticky{% endif %}">
                {%- assign product_form_id = 'product-form-' | append: section.id -%}
                {%- for block in section.blocks -%}
                  {%- case block.type -%}
                  {%- when '@app' -%}
                    {% render block %}
                  {%-  when 'exclusive'  -%}
                    {% if block.settings.exclusive != blank %}
                      <span class="extra-exclusive"> {{ block.settings.exclusive  }}</span>
                    {% endif %}
                  {%- when 'sale_icon' -%}
                    <span class="sale_icon" style="{% if block.setting.bg != blank %} background: {{ block.settings.bg }} {% endif %}">
                      {{ block.settings.content }}
                    </span>
                  {%- when 'text' -%}
                    {% if block.settings.text != blank %}
                      <p class="product-title-pc product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}" {{ block.shopify_attributes }}>
                        {{- block.settings.text -}}
                      </p>
                    {% endif %}
                    <div class="cgo-title">
                      {% if section.settings.product_sale == true and block.settings.type == 'desc' %}
                        <div class="product-sale-m">
                          <span>UP TO {{ section.settings.product_sale_value }}</span>
                        </div>
                      {% endif %}
                      {% if section.settings.product_sale == false and section.settings.show_season_sale == true and block.settings.type == 'desc'  %}
                        <div class="coupons_metafields coupons_metafields-for-mobile">
                          {%- form 'localization', id: 'FooterCountryForm' -%}
                            {% if localization.country.iso_code == 'GB' %}  
                              <div id="coupons-{{ section.id }}" class="easter-discount">   
                                {%- assign product_form_id = 'product-form-' | append: section.id -%}                         
                                {% for variant in product.variants %}
                                    {% if product.selected_or_first_available_variant.id == variant.id %}
                                        {% if variant.metafields.custom.coupons !=blank %}
                                        <div class="mata_coupons us-coupons">
                                          <div class="discount_icon">
                                            £300
                                          </div>
                                          {% render "icon-coupons" %}
                                          <div class="ar_blue">
                                            {{ variant.metafields.custom.coupons }}
                                            <span>
                                              £300 OFF
                                            </span>
                                          </div>
                                        </div>
                                        {% endif %}
                                    {% endif %}
                                  {%- endfor -%}
                              </div>   
                            {% else %}   
                              <div id="couponseu-{{ section.id }}" class="easter-discount coupons_metafields">   
                                {%- assign product_form_id = 'product-form-' | append: section.id -%}                         
                                {% for variant in product.variants %}
                                    {% if product.selected_or_first_available_variant.id == variant.id %}
                                        {% if variant.metafields.custom.coupons_eu !=blank %}
                                        <div class="mata_coupons us-coupons">
                                          <div class="discount_icon">
                                            €300
                                          </div>
                                          {% render "icon-coupons" %}
                                          <div class="ar_blue">
                                            {{ variant.metafields.custom.coupons_eu }}
                                            <span>
                                              €300 OFF
                                            </span>
                                          </div>
                                        </div>
                                        {% endif %}
                                    {% endif %}
                                  {%- endfor -%}
                              </div>   
                            {% endif %}                      
                          {%- endform -%}
                        </div>
                      {% endif %}
                      
                      {% if block.settings.richtext != blank  %}
                        <div class="cgoTitle product-title-pc">
                        {{- block.settings.richtext -}}
                        </div>
                      {% endif %}
                      {% if block.settings.des != blank  %}
                        <div class="des">
                          {{- block.settings.des -}}
                        </div>
                      {% endif %}
                    </div>
                    {%- if block.settings.p_des != blank -%}
                      <div class="tenways-p_des">
                        {{ block.settings.p_des }}
                      </div> 
                    {%- endif -%}
                  
                  {% when 'loox-rating' %}
                    <div class="tenways-yotpo">
                      <div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div>
                    </div>
                    
                  {%- when 'title' -%}
                    <h1 class="product__title" {{ block.shopify_attributes }}>
                      {{ product.title | escape }}
                    </h1>
                  
                  {%- when 'price' -%}
                    <div class="product-title-pc no-js-hidden tenways-price product-price-handler" id="price-{{ section.id }}" {{ block.shopify_attributes }}>
                      {%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large', price_type: 'compare_last' -%}
                    </div>
                    <div class="product-title-pc" {{ block.shopify_attributes }}>
                      {%- form 'product', product, id: 'product-form-installment', class: 'installment caption-large' -%}
                        <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                        {{ form | payment_terms }}
                      {%- endform -%}
                    </div>
                    
                  {%- when 'description' -%}

                    {% if block.settings.title != blank %}
                      <div class="text">{{ block.settings.title }}</div>
                    {% endif %}
                    {%- if product.description != blank -%}
                      <div class="product__description rte">
                        {{ product.description }}
                      </div>
                    {%- endif -%}
                    
                  
                  {%- when 'ISO' -%}
                    {% assign IsoCode = block.settings.iso_code | split: ',' %}
                    {% if IsoCode contains localization.country.iso_code %}
                      <div class="iso_code">
                        {{ block.settings.text }}                       
                        {% if block.settings.text_1 != blank  %}
                          {% assign IsoCode1 = block.settings.iso_1 | split: ',' %}
                          {% if IsoCode1 contains localization.country.iso_code %}
                            <div class="text"> <span>{% render 'icon-ky' %}</span> <span class="span">{{ block.settings.text_1 }}</span> </div>                           
                          {% endif %}
                        {% endif %}
                        
                        {% if block.settings.text_2 != blank  %}
                          {% assign IsoCode2 = block.settings.iso_2 | split: ',' %}
                          {% if IsoCode2 contains localization.country.iso_code %}
                            <div class="text"><span>{% render 'icon-ky' %}</span> <span class="span">{{ block.settings.text_2 }}</span> </div>                           
                          {% endif %}
                        {% endif %}
                        
                        {% if block.settings.text_3 != blank  %}
                          {% assign IsoCode3 = block.settings.iso_3 | split: ',' %}
                          {% if IsoCode3 contains localization.country.iso_code %}
                            <div class="text"> <span>{% render 'icon-ky' %}</span> <span class="span">{{ block.settings.text_3 }}</span> </div>                           
                          {% endif %}
                        {% endif %}
                        
                        {% if block.settings.text_4 != blank  %}
                          {% assign IsoCode4 = block.settings.iso_4 | split: ',' %}
                          {% if IsoCode4 contains localization.country.iso_code %}
                            <div class="text"> <span>{% render 'icon-ky' %}</span> <span class="span">{{ block.settings.text_4 }}</span> </div>                           
                          {% endif %}
                        {% endif %}
                        
                        {% if block.settings.text_5 != blank  %}
                          {% assign IsoCode5 = block.settings.iso_5 | split: ',' %}
                          {% if IsoCode5 contains localization.country.iso_code %}
                            <div class="text"> <span>{% render 'icon-ky' %}</span> <span class="span">{{ block.settings.text_5 }}</span> </div>                           
                          {% endif %}
                        {% endif %}
                      </div>
                    {% endif %}
                    
                  {%- when 'list-payment' -%}     
                    <ul class="list list-payment" role="list">
                      {%- for type in shop.enabled_payment_types -%}
                        <li class="list-payment__item">
                          {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                        </li>
                      {%- endfor -%}
                      {% assign IsoCode = block.settings.iso_code | split: ',' %}
                      {% if IsoCode contains localization.country.iso_code %}
                        <li class="list-payment__item">{% render 'icon-klaran' %}</li>
                      {% endif %}
                    </ul>
                    
                  {%- when 'coupons' -%}
                    <div {{ block.shopify_attributes }}>
                      <div class="coupons">
                        <div class="coupons-left">
                          {%- if block.settings.html != blank -%}  
                              <span>{{ block.settings.html }}</span>
                              {%- endif -%} 
                        </div>                    
                        <div class="coupons-right">
                            {%- if block.settings.richtext != blank -%}  
                              <div>{{ block.settings.richtext }}</div>
                            {%- endif -%} 
                        </div>
                      </div>
                    </div>
                    
                  {%- when 'custom_liquid' -%}
                    {{ block.settings.custom_liquid }}
                    
                  {%- when 'collapsible_tab' -%}
                    <div class="product__accordion accordion" {{ block.shopify_attributes }}>
                      <details>
                        <summary>
                          <div class="summary__title">
                            {% render 'icon-accordion', icon: block.settings.icon %}
                            <h2 class="h4 accordion__title">
                              {{ block.settings.heading | default: block.settings.page.title }}
                            </h2>
                          </div>
                          {% render 'icon-caret' %}
                        </summary>
                        <div class="accordion__content rte">
                          {{ block.settings.content }}
                          {{ block.settings.page.content }}
                        </div>
                      </details>
                    </div>
                    
                  {%- when 'quantity_selector' -%}
                    <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
                      <label class="form__label" for="Quantity-{{ section.id }}">
                        {{ 'products.product.quantity.label' | t }}
                      </label>
        
                      <quantity-input class="quantity">
                        <button class="quantity__button no-js-hidden" name="minus" type="button">
                          <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                          {% render 'icon-minus' %}
                        </button>
                        <input class="quantity__input"
                          type="number"
                          name="quantity"
                          id="Quantity-{{ section.id }}"
                          min="1"
                          value="1"
                          form="product-form-{{ section.id }}"
                        >
                        <button class="quantity__button no-js-hidden" name="plus" type="button">
                          <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                          {% render 'icon-plus' %}
                        </button>
                      </quantity-input>
                    </div>
                    
                  {%- when 'popup' -%}
                    <modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-{{ block.id }}" {{ block.shopify_attributes }}>
                      <button id="ProductPopup-{{ block.id }}" class="product-popup-modal__button link" type="button" aria-haspopup="dialog">{{ block.settings.text | default: block.settings.page.title }}</button>
                    </modal-opener>
                    <a href="{{ block.settings.page.url }}" class="product-popup-modal__button link no-js">{{ block.settings.text }}</a>
                  
                  {%- when 'share' -%}
                    <share-button class="share-button" {{ block.shopify_attributes }}>
                      <button class="share-button__button hidden">
                        {% render 'icon-share' %}
                        {{ block.settings.share_label | escape }}
                      </button>
                      <details>
                        <summary class="share-button__button">
                          {% render 'icon-share' %}
                          {{ block.settings.share_label | escape }}
                        </summary>
                        <div id="Product-share-{{ section.id }}" class="share-button__fallback motion-reduce">
                          <div class="field">
                            <span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
                            </span>
                            <input type="text"
                              class="field__input"
                              id="url"
                              value="{{ shop.url | append: product.url }}"
                              placeholder="{{ 'general.share.share_url' | t }}"
                              onclick="this.select();"
                              readonly
                            >
                            <label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
                          </div>
                          <button class="share-button__close hidden no-js-hidden">
                            {% render 'icon-close' %}
                            <span class="visually-hidden">{{ 'general.share.close' | t }}</span>
                          </button>
                          <button class="share-button__copy no-js-hidden">
                            {% render 'icon-clipboard' %}
                            <span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
                          </button>
                        </div>
                      </details>
                    </share-button>
                    <script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
                  
                    {%- when 'variant_picker' -%}
                    <div class="tenways-panel">
                      <div class="pannel_li">
                        <div class="text">{{ block.settings.title_1 }}</div>
                        <div class="pannel_content deal_of-theday">
                          <div class="deal_content">
                            <div class="left">
                              <div class="image-with-text__media image-with-text__media--adapt {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                                {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                              >
                                <img
                                  srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | img_url: '275x' }} 275w,{%- endif -%}
                                    {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
                                    {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
                                    {%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}
                                    {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                                  src="{{ block.settings.image | img_url: '550x' }}"
                                  sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
                                    (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
                                    calc(100vw - 30px)"
                                  alt="{{ block.settings.image.alt }}"
                                  height="{{ block.settings.image.height }}"
                                  width="{{ block.settings.image.width }}"
                                  loading="lazy"
                                >
                              </div>
                            </div>
                            <div class="right">
                              <div class="free_price"><span class="free">{{ block.settings.free }}</span>{% if block.settings.collection.products.size > 0 %} {% render 'collection-price', products: block.settings.collection.products %} {% endif %}</div>
                              <div class="free_content">
                                <div class="free_title">{{ block.settings.free_title }}</div>
                                <div class="free_richtext">
                                  <div class="free_richtext">
                                    {%- if block.settings.free_richtext != blank -%}
                                      <div class="fr_rte">
                                        <modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-{{ section.id }}" >
                                          <button id="ProductPopup-{{ section.id }}" class="product-popup-modal__button link" type="button" aria-haspopup="dialog">{{ block.settings.free_richtext }}</button>
                                        </modal-opener>
                                      </div>
                                    {%- endif -%}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        {% if block.settings.sale_collection_price != blank %}
                          <div class="pannel_content deal_of-theday">
                            <div class="deal_content">
                              <div class="left">
                                <div class="image-with-text__media image-with-text__media--adapt {% if block.settings.sale_image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                                  {% if block.settings.sale_image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.sale_image.aspect_ratio | times: 100 }}%;"{% endif %}
                                >
                                  <img
                                    srcset="{%- if block.settings.sale_image.width >= 275 -%}{{ block.settings.sale_image | img_url: '275x' }} 275w,{%- endif -%}
                                      {%- if block.settings.sale_image.width >= 550 -%}{{ block.settings.sale_image | img_url: '550x' }} 550w,{%- endif -%}
                                      {%- if block.settings.sale_image.width >= 710 -%}{{ block.settings.sale_image | img_url: '710x' }} 710w,{%- endif -%}
                                      {%- if block.settings.sale_image.width >= 1420 -%}{{ block.settings.sale_image | img_url: '1420x' }} 1420w,{%- endif -%}
                                      {{ block.settings.sale_image | img_url: 'master' }} {{ block.settings.sale_image.width }}w"
                                    src="{{ block.settings.sale_image | img_url: '550x' }}"
                                    sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
                                      (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
                                      calc(100vw - 30px)"
                                    alt="{{ block.settings.sale_image.alt }}"
                                    height="{{ block.settings.sale_image.height }}"
                                    width="{{ block.settings.sale_image.width }}"
                                    loading="lazy"
                                  >
                                </div>
                              </div>
                              <div class="right">
                                <div class="free_price" id="sale-price-{{ section.id }}">
                                  <span class="free">{{ block.settings.sale_collection_price }}</span>
                                  {%- assign sale_size_label = 'Size,Maat,Dimensioni,Taille,Größe,Tamaño' | split: ',' -%}
                                  {%- for option in product.options_with_values %}
                                      {%if sale_size_label contains option.name %}
                                        {% assign size_value = option.selected_value %}
                                      {% endif %}
                                  {% endfor %}
                                  {% render 'collection-price', products: block.settings.sale_collection.products %}
                                  </div>
                                <div class="free_content">
                                  <div class="free_title">{{ block.settings.sale_title }}</div>
                                  <div class="free_richtext">
                                    <div class="free_richtext">
                                      {%- if block.settings.sale_richtext != blank -%}
                                        <div class="fr_rte">
                                          {{ block.settings.sale_richtext }}
                                        </div>
                                      {%- endif -%}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        {% endif %}
                      </div>
                      <div class="pannel_li">
                        <div class="text">{{  block.settings.title_2 }}</div>
                        <div class="pannel_content variant_picker">
                          {%- unless product.has_only_default_variant -%}
                            {%- if block.settings.picker_type == 'button' -%}            
                              <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                                {%- for option in product.options_with_values -%}                      
                                {%- assign color_label = 'Color,Kleur,color,Colour,Couleur,colore,Colore,Farbe,farbe,색,色,färg,farve' | split: ',' -%}
                                {%- assign size_label = 'Size,Maat,Dimensioni,Taille,Größe,Tamaño' | split: ',' -%}
                                {%- assign deliver_label = 'Deliver to,Bezorgen aan,Spedire a,Livrer à,Liefern an,Enviar a' | split: ',' -%}
                                {%- assign downcased_option = option.name | downcase -%}
                                {%- assign file_extension = 'png' -%}
                                {%- if color_label  contains  option.name -%}
                                  <fieldset class="js product-form__input color" data-color="color" id="color_fieldset">
                                    <legend class="form__label">{{ option.name }} - <span id="color_label" class="color_label-{{ section.id }}"> {{ option.selected_value }} </span></legend>
                                    {%- for value in option.values -%}
                                      <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                        name="{{ option.name }}"
                                        value="{{ value | escape }}"
                                        form="product-form-{{ section.id }}"
                                        {% if option.selected_value == value %}checked{% endif %}
                                      >
                                        {%- if show_badges -%}
                                          <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}" aria-hidden="true">
                                            {{ 'products.product.sold_out' | t }}
                                          </span>
                                        {%- endif -%}
                                        <label class="cs_label" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                                          <img loading="lazy" class="cs_img" src="{{ value | handle | append: '.' | append: file_extension | asset_url  }}" width="33" height="33" alt="tenways_ebike" />

                                          {% if value == 'Lime Green' and block.settings.variant_sale_icon != blank %}
                                            <span class="variant_sale_icon">
                                              {{ block.settings.variant_sale_icon }}
                                              <span class="variant_sale_content">
                                                {{ block.settings.variant_sale_content }}
                                              </span>
                                            </span>
                                          {% endif %}                                        </label>
                                    {%- endfor -%}
                                  </fieldset>
                                  {% elsif size_label contains  option.name %}
                                    <fieldset class="js product-form__input">
                                      <legend class="form__label">{{ option.name }} 
                                        <div id="metafields-{{ section.id }}" class="size_metafields">                            
                                          {% for variant in product.variants %}
                                            {% if product.selected_or_first_available_variant.id == variant.id %}
                                              {{ variant.metafields.custom.size_label }}
                                            {% endif %} 
                                          {% endfor %} 
                                        </div> 
                                      </legend>
                                      {%- for value in option.values -%}
                                        <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                          name="{{ option.name }}"
                                          value="{{ value | escape }}"
                                          form="product-form-{{ section.id }}"
                                          {% if option.selected_value == value %}checked{% endif %}
                                        >
                                        <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                                          {{ value }}
                                          {% if value == 'XL' and block.settings.variant_sale_icon != blank %}
                                            <span class="variant_sale_icon">
                                              {{ block.settings.variant_sale_icon }}
                                              <span class="variant_sale_content">
                                                {{ block.settings.variant_sale_content }}
                                              </span>
                                            </span>
                                          {% endif %}
                                        </label>
                                      {%- endfor -%}
                                    </fieldset>                   
                                  {% else deliver_label contains  option.name %}                   
                                    <fieldset class="js product-form__input" id="deliver_on">
                                      <legend class="form__label">{{ option.name }} 
                                        <span class="tenways-tip">{% render 'tenways-tip' %}</span>
                                        <div class="field-tooltip-content">
                                          {{ product.metafields.my_fields.deliver }}
                                        </div>
                                      </legend>
                                      {%- for value in option.values -%}
                                        <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                          name="{{ option.name }}"
                                          value="{{ value | escape }}"
                                          form="product-form-{{ section.id }}"
                                          {% if option.selected_value == value %}checked{% endif %}
                                        >
                                        <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                                          {{ value }}
                                        </label>
                                      {%- endfor -%}
                                    </fieldset>
                                  {%- endif -%}                
                                {%- endfor -%}
                                {% if section.settings.size_one != blank %}
                                  <div class="size_one">
                                    {{ section.settings.size_one }}
                                  </div>
                                {% endif %}
                                <script type="application/json">
                                  {{ product.variants | json }}
                                </script>
                              </variant-radios>
                            {%- else -%}
                              <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
                                {%- for option in product.options_with_values -%}
                                  <div class="product-form__input product-form__input--dropdown">
                                    <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                                      {{ option.name }}
                                    </label>
                                    <div class="select">
                                      <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                                        class="select__select"
                                        name="options[{{ option.name | escape }}]"
                                        form="product-form-{{ section.id }}"
                                      >
                                        {%- for value in option.values -%}
                                          <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                                            {{ value }}
                                          </option>
                                        {%- endfor -%}
                                      </select>
                                      {% render 'icon-caret' %}
                                    </div>
                                  </div>
                                {%- endfor -%}
                                <script type="application/json">
                                  {{ product.variants | json }}
                                </script>
                              </variant-selects>
                            {%- endif -%}
                          {%- endunless -%}
                            
                          <noscript class="product-form__noscript-wrapper-{{ section.id }}">
                            <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
                              <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
                              <div class="select">
                                <select name="id" id="Variants-{{ section.id }}" class="select__select" form="product-form">
                                  {%- for variant in product.variants -%}
                                    <option
                                      {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
                                      {% if variant.available == false %}disabled{% endif %}
                                      value="{{ variant.id }}"
                                    >
                                      {{ variant.title }}
                                      {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                                      - {{ variant.price | money | strip_html }}
                                    </option>
                                  {%- endfor -%}
                                </select>
                                {% render 'icon-caret' %}
                              </div>
                            </div>
                            </noscript>
                          </div>
                        </div>
                    </div>
                  
                  {%- when 'shipping_time' -%}         
                    <div id="inventory-{{ section.id }}" class="shipping_metafields" {{ block.shopify_attributes }} style="color: {{ block.settings.text_color }};">                            
                      {% for variant in product.variants %}
                        {% if product.selected_or_first_available_variant.id == variant.id %}
                          {{ variant.metafields.custom.shipping_time }}
                        {% endif %} 
                      {% endfor %} 
                    </div>
                  
                  {%- when 'rating' -%}
                    {%- if product.metafields.reviews.rating.value != blank -%}
                      {% liquid
                      assign rating_decimal = 0
                      assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
                      if decimal >= 0.3 and decimal <= 0.7
                        assign rating_decimal = 0.5
                      elsif decimal > 0.7
                        assign rating_decimal = 1
                      endif
                      %}
                      <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}">
                        <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
                      </div>
                      <p class="rating-text caption">
                        <span aria-hidden="true">{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}</span>
                      </p>
                      <p class="rating-count caption">
                        <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
                        <span class="visually-hidden">{{ product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
                      </p>
                    {%- endif -%}
                  {%- endcase -%} 
                {%- endfor -%}
                
                {%- if section.settings.payment_enable -%}
                  <div class="pc-footer_payment footer__payment">
                    <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
                    <ul class="list list-payment" role="list">
                      {%- for type in shop.enabled_payment_types -%}
                        <li class="list-payment__item">
                          {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                        </li>
                      {%- endfor -%}
                      <li class="list-payment__item">{% render 'icon-klaran' %}</li>
                    </ul>
                  </div>
                {%- endif -%}
            
                {%- if section.settings.show_klarna != blank -%}
                  <div class="tenways-klarna">
                    <span>{% render 'icon-notice' %}</span>
                    {{ section.settings.show_klarna }}
                  </div>
                {%- endif -%}
              </div>
            </div>
          </div>
          {%- for block in section.blocks -%}
            {%- case block.type -%}
            {%- when 'buy_buttons' -%}
              <div class="is-sticky" id="bottom-pixel">
                <div class="is-flex page-width">
                  <div class="sticky-left">
                    <div id="delivery-{{ section.id }}" class="shipping_metafields" >                          
                      {% for variant in product.variants %}
                            {% if product.selected_or_first_available_variant.id == variant.id and variant.metafields.custom.shipping_time != blank %}
                              <span class="icon-shipping"> {% render 'icon-shipping_time' %}</span>   
                              {{ variant.metafields.custom.shipping_time }}
                          {% endif %} 
                      {% endfor %} 
                    </div> 
                    {% if block.settings.service != blank %}
                      <span class="service">{{ block.settings.service }}</span>
                    {% endif %}
                  </div>
                  <div class="sticky-right">
                    <div class="no-js-hidden tenways-price price-right product-price-handler" id="price-{{ section.id }}" {{ block.shopify_attributes }}>
                      {%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
                    </div>
                    <div class="button_notify" {{ block.shopify_attributes }}>
                      <product-form class="product-form" >
                        <div class="product-form__error-message-wrapper" role="alert" hidden>
                          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
                            <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                            <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                            <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                            <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                          </svg>
                          <span class="product-form__error-message"></span>
                        </div>
      
                        {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                          <input type="hidden" name="id" id="product_id_input" value="{{ product.selected_or_first_available_variant.id }}">
                          <div class="product-form__buttons">
                            <button
                              type="submit"
                              name="add"
                              class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                              {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                            >
                                <span>
                                  {%- if product.selected_or_first_available_variant.available -%}
                                    {{ 'products.product.add_to_cart' | t }}
                                  {%- else -%}
                                    {{ 'products.product.sold_out' | t }}
                                  {%- endif -%}
                                </span>
                                <div class="loading-overlay__spinner hidden">
                                  <svg width="18" height="18" aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                                    <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                                  </svg>
                                </div>
                            </button>
                            {%- if block.settings.show_dynamic_checkout -%}
                              {{ form | payment_button }}
                            {%- endif -%}
                          </div>
                        {%- endform -%}
                      </product-form>
      
                      <a class="tenways-klaviyo button klaviyo-bis-trigger" href="#">{{ section.settings.notify_me }}</a> 
                            
                      {{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}
      
                      {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities | where: 'pick_up_enabled', true -%}
      
                      <pickup-availability class="product__pickup-availabilities no-js-hidden"
                        {% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %} available{% endif %}
                        data-base-url="{{ shop.url }}{{ routes.root_url }}"
                        data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                        data-has-only-default-variant="{{ product.has_only_default_variant }}"
                      >
                        <template>
                          <pickup-availability-preview class="pickup-availability-preview">
                            {% render 'icon-unavailable' %}
                            <div class="pickup-availability-info">
                              <p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
                              <button class="pickup-availability-button link link--text underlined-link">{{ 'products.product.pickup_availability.refresh' | t }}</button>
                            </div>
                          </pickup-availability-preview>
                        </template>
                      </pickup-availability>
                    </div>
                    <script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
                  </div>
                </div>
              </div>
            {% endcase %}
          {% endfor %}
        </div>
        
        <product-modal id="ProductModal-{{ section.id }}" class="product-media-modal media-modal">
          <div class="product-media-modal__dialog" role="dialog" aria-label="{{ 'products.modal.label' | t }}" aria-modal="true" tabindex="-1">
            <button id="ModalClose-{{ section.id }}" type="button" class="product-media-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
      
            <div class="product-media-modal__content" role="document" aria-label="{{ 'products.modal.label' | t }}" tabindex="0">
              {%- liquid
                if product.selected_or_first_available_variant.featured_media != null
                  assign media = product.selected_or_first_available_variant.featured_media
                  render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: section.settings.hide_variants
                endif
              -%}
      
              {%- for media in product.media -%}
                {%- liquid
                  if section.settings.hide_variants and variant_images contains media.src
                    assign variant_image = true
                  else
                    assign variant_image = false
                  endif
      
                  unless media.id == product.selected_or_first_available_variant.featured_media.id
                    render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: variant_image
                  endunless
                -%}
              {%- endfor -%}
            </div>
          </div>
        </product-modal>
        
        {% assign popups = section.blocks | where: "type", "popup" %}
        {%- for block in popups -%}
          <modal-dialog id="PopupModal-{{ block.id }}" class="product-popup-modal" {{ block.shopify_attributes }}>
            <div role="dialog" aria-label="{{ block.settings.text }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
              <button id="ModalClose-{{ block.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
              <div class="product-popup-modal__content-info">
                <h1 class="h2">{{ block.settings.page.title }}</h1>
                {{ block.settings.page.content }}
              </div>
            </div>
          </modal-dialog>
        {%- endfor -%}
      </section>
    </modal-product>
  </div>
</menu-section-list>

{%  if section.settings.klaviyo_id != blank %}
  <modal-dialog-form id="PopupModal-{{ section.id }}" class="product-popup-modal">
    <div role="dialog" aria-label="{{ block.settings.text }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
      <button id="ModalClose-{{ section.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}"> {% render 'icon-close' %}</button>
      <div class="product-popup-modal__content-info">
        {{ section.settings.klaviyo_id }}
      </div>
    </div>
  </modal-dialog-form>
{% endif %}

<script>
  function newLargeImage(x) {
    let clickedImageMediaId = x.dataset.mediaId;
    const newImage = document.querySelector(`.product__media-item-handler[data-media-id="${clickedImageMediaId}"]`);
    const parentData = newImage.parentElement;

    parentData.prepend(newImage);
    newImage.style.display = "block";

    document.querySelectorAll('.slide-image-handler').forEach(thumb => thumb.classList.remove('active-thumb'));
    const sliderComp = document.querySelector("slider-component");
    document.querySelector(`.slide-image-handler[data-media-id="${clickedImageMediaId}"]`).classList.add('active-thumb');
    updateIndex(clickedImageMediaId);
  };
  
  $(window).ready(function() {
    window.globalData = {
      currentProductThumbsIndex: 0
    }
        
    $('[thumbnail-color]').hide();
    const Upcolor = document.getElementById('color_label').innerHTML.toLowerCase().replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");
    const color_attribute = '[thumbnail-color="' + Upcolor + '"]';
    const FirstsThumbnail = $(color_attribute).first();
    $(color_attribute).show();
    FirstsThumbnail.click();
    
    const U_color = document.getElementById('color_label');
    $("#color_fieldset input").each(function(){
      $(this).click(function(e){
        var name = $(this).attr('value');
        U_color.innerHTML = name;
        window.globalData['currentProductThumbsIndex'] = 0;
      });
    });
    
    $("#insurance_select").on('change', function () {
      $('#insurance_vaiant_flag').val($(this).val() !== '');
      $("#insurance_vaiant_input").val($(this).val());
      if ($(this).val() === '') {
        $("#insurance_product_input").val('');
      } else {
        $("#insurance_product_input").val($(this).attr('data-product-id'))
      }
    })
  })
</script>

{{ section.settings.custom_liquid }}

{% schema %}
{
  "name": "Menu section",
  "class": "common-product menu-section-list-container element_top",
  "settings": [
    {
      "type": "select",
      "id": "product_handle",
      "label": "product handle",
      "options": [
        {
          "label": "agot",
          "value": "agot"
        },
        {
          "label": "agox",
          "value": "agox"
        },
        {
          "label": "cgo600",
          "value": "cgo600"
        },
        {
          "label": "cgo600pro",
          "value": "cgo600pro"
        },
        {
          "label": "cgo800s",
          "value": "cgo800s"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "show_season_sale",
      "label": "show season sale",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "product_sale",
      "label": "product sale",
      "default": false
    },
    {
      "type": "text",
      "id": "product_sale_value",
      "label": "product sale text",
      "default": "400 OFF"
    },
    {
      "type": "html",
      "id": "klaviyo_id",
      "label": "klaviyo sign up key"
    },
    {
      "type": "liquid",
      "id": "custom_liquid",
      "label": "custom liquid"
    },
    {
      "type": "product",
      "label": "Product",
      "id": "product"
    },
    {
      "type": "select",
      "id": "redirect_type",
      "default": "modal",
      "label": "redirect type",
      "options": [
        {
          "value": "link",
          "label": "link"
        },
        {
          "value": "modal",
          "label": "modal"
        }
      ]
    },
    {
      "type": "text",
      "id": "home",
      "default": "Home",
      "label": "Home"
    },
    {
      "type": "richtext",
      "id": "richtext",
      "label": "Product name"
    },
    {
      "type": "url",
      "id": "url",
      "label": "button_link"
    },
    {
      "type": "html",
      "id": "icon",
      "label": "Icon"
    },
    {
      "type": "url",
      "id": "order_now_url",
      "label": "Order now url"
    },
    {
      "type": "text",
      "id": "order_now",
      "default": "Order now",
      "label": "Order now"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
      "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
    },
    {
      "type": "checkbox",
      "id": "enable_sticky_info",
      "default": true,
      "label": "t:sections.main-product.settings.enable_sticky_info.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-product.settings.header.content",
      "info": "t:sections.main-product.settings.header.info"
    },
    {
      "type": "text",
      "id": "notify_me",
       "default": "Notify me",
      "label": "Notify me"
    },
    {
      "type": "richtext",
      "id": "shipping",
      "label": "Shipping"
    },
    {
      "type": "text",
      "id": "de_one",
      "label": "EU"
    },
    {
      "type": "text",
      "id": "de_two",
      "label": "UK"
    },
    {
      "type": "text",
      "id": "de_three",
      "label": "US"
    },
    {
      "type": "checkbox",
      "id": "hide_variants",
      "default": false,
      "label": "t:sections.main-product.settings.hide_variants.label"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "default": false,
      "label": "t:sections.main-product.settings.enable_video_looping.label"
    },
    {
      "type": "checkbox",
      "id": "payment_enable",
      "default": true,
      "label": "Show payment icons"
    },
    {
      "type": "header",
      "content": "FREE Accessories"
    },
    {
      "type": "checkbox",
      "id": "show_cart_accessories",
      "default": false,
      "label": "Show Accessories"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "text",
      "id": "collection_title",
      "label": "Featured collection"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Des"
    },
    {
      "type": "richtext",
      "id": "text_us",
      "label": "text us"
    },
    {
      "type": "richtext",
      "id": "text_1",
      "label": "Text 1"
    },
    {
      "type": "text",
      "id": "size_one",
      "label": "One size"
    },
    {
      "type": "text",
      "id": "free",
      "label": "Free"
    },
    {
      "type": "text",
      "id": "us_free",
      "label": "Us Free"
    },
     {
      "type": "text",
      "id": "eu_free",
      "label": "EU Free"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 2,
      "default": 4,
      "label": "products to show"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "Show_view_all"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "swipe_on_mobile"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "adapt"
        },
        {
          "value": "portrait",
          "label": "portrait"
        },
        {
          "value": "square",
          "label": "square"
        }
      ],
      "default": "adapt",
      "label": "adapt"
    },
    {
      "type": "richtext",
      "id": "show_free_acc",
      "label": "Show Free Acc"
    },
    {
      "type": "richtext",
      "id": "show_klarna",
      "label": "Show klarna"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "show_secondary_image"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "add_image_padding"
    },
    {
      "type": "checkbox",
      "id": "show_image_outline",
      "default": true,
      "label": "show_image_outline"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "show_vendor"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "show_rating",
      "info": "show_rating"
    },
    {
      "type": "text",
      "id": "size_label1",
      "label": "Size label1",
      "default": "For rider height - 165~185cm"
    },
    {
      "type": "text",
      "id": "size_label2",
      "label": "Size label2",
      "default": "For rider height - 180~200cm"
    },
    {
      "type": "text",
      "id": "size_label3",
      "label": "Size label3",
      "default": "3"
    },
    {
      "type": "text",
      "id": "size_label4",
      "label": "Size label4",
      "default": "4"
    },
    {
      "type": "html",
      "id": "feature1",
      "label": "Feature1"
    },
    {
      "type": "html",
      "id": "feature2",
      "label": "Feature2"
    },
    {
      "type": "html",
      "id": "feature3",
      "label": "Feature3"
    },
    {
      "type": "html",
      "id": "html_1",
      "label": "html_1"
    },
    {
      "type": "html",
      "id": "html_2",
      "label": "html_2"
    },
    {
      "type": "html",
      "id": "html_3",
      "label": "html_3"
    }
  ],
  "blocks": [
    {
      "type": "exclusive",
      "name": "exclusive",
      "settings": [
        {
          "type": "text",
          "id": "exclusive",
          "label": "content"
        }
      ]
    },
    {
      "type": "showcase",
      "name": "showcase",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "show case image"
        },
        {
          "type": "image_picker",
          "id": "image_mobile",
          "label": "show case image mobile"
        }
      ]
    },
    {
      "type": "sale_icon",
      "name": "Sale Icon",
      "settings": [
        {
          "type": "text",
          "id": "content",
          "label": "content"
        },
        {
          "type": "text",
          "id": "bg",
          "label": "Background"
        }
      ]
    },
    {
      "type": "column",
      "name": "t:sections.multicolumn.blocks.column.name",
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "button_link"
        }
      ]
    },
    {
      "type": "@app"
    },
    {
      "type": "text",
      "name": "t:sections.main-product.blocks.text.name",
      "settings": [
        {
          "type": "select",
          "id": "type",
          "label": "type",
          "default": "title",
          "options": [
            {
              "value": "title",
              "label": "Title"
            },
            {
              "value": "desc",
              "label": "Description"
            }
          ]
        },
        {
          "type": "text",
          "id": "text",
          "default": "Text block",
          "label": "t:sections.main-product.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "uppercase",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.main-product.blocks.text.settings.text_style.label"
        },
        {
          "type": "richtext",
          "id": "richtext",
          "default": "<p>Text block</p>",
          "label": "Product title"
        },
        {
          "type": "text",
          "id": "des",
          "default": "prodyct des",
          "label": "Prodyct des"
        },
        {
          "type": "richtext",
          "id": "p_des",
          "label": "Tenways love"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    },
    {
      "type": "title",
      "name": "t:sections.main-product.blocks.title.name",
      "limit": 1
    },
    {
      "type": "price",
      "name": "t:sections.main-product.blocks.price.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "price",
          "label": "Early bird price"
        },
        {
          "type": "richtext",
          "id": "shipping",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "Shipping"
        }
      ]
    },
    {
      "type": "quantity_selector",
      "name": "t:sections.main-product.blocks.quantity_selector.name",
      "limit": 1
    },
    {
      "type": "variant_picker",
      "name": "t:sections.main-product.blocks.variant_picker.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "title_1",
          "label": "Collapsible tab 1"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "image_ratio",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
            },
            {
              "value": "portrait",
              "label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
            },
            {
              "value": "square",
              "label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
            },
            {
              "value": "circle",
              "label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
            }
          ],
          "default": "adapt",
          "label": "t:sections.multicolumn.settings.image_ratio.label"
        },
        {
          "type": "product",
          "id": "insurance",
          "label": "insurance product"
        },
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "text",
          "id": "price",
          "label": "Price"
        },
        {
          "type": "text",
          "id": "free",
          "label": "Free"
        },
        {
          "type": "text",
          "id": "free_title",
          "label": "Free title"
        },
        {
          "type": "richtext",
          "id": "free_richtext",
          "label": "Free richtext"
        },
        {
          "type": "image_picker",
          "id": "sale_image",
          "label": "Sale Image"
        },
        {
          "type": "collection",
          "id": "sale_collection",
          "label": "sale collection"
        },
        {
          "type": "text",
          "id": "sale_collection_price",
          "label": "sale collection price",
          "default": "€1"
        },
        {
          "type": "text",
          "id": "sale_title",
          "label": "sale title"
        },
        {
          "type": "richtext",
          "id": "sale_richtext",
          "label": "sale richtext"
        },
        {
          "type": "text",
          "id": "title_2",
          "label": "Collapsible tab 2"
        },
        {
          "type": "text",
          "id": "title_3",
          "label": "Collapsible tab 3"
        },
        {
          "type": "select",
          "id": "picker_type",
          "options": [
            {
              "value": "dropdown",
              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label"
            },
            {
              "value": "button",
              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label"
            }
          ],
          "default": "button",
          "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
        },
        {
          "type": "html",
          "id": "variant_sale_icon",
          "label": "sale_icon"
        },
        {
          "type": "html",
          "id": "variant_sale_content",
          "label": "content"
        }
      ]
    },
    {
      "type": "shipping_time",
      "name": "Shipping Time",
      "limit": 1,
      "settings": [
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color"
        }
      ]
    },
    {
      "type": "slogen",
      "name": "slogen",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "desc",
          "label": "desc"
        }
      ]
    },
    {
      "type": "buy_buttons",
      "name": "t:sections.main-product.blocks.buy_buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_dynamic_checkout",
          "default": true,
          "label": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.label",
          "info": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
        },
        {
          "type": "text",
          "id": "service",
          "label": "service"
        }
      ]
    },
    {
      "type": "description",
      "name": "t:sections.main-product.blocks.description.name",
      "limit": 1,
      "settings": [
        {
          "type": "html",
          "id": "description_us",
          "label": "description US"
        }
      ]
    },
    {
      "type": "coupons",
      "name": "coupons",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text"
        },
       {
          "type": "richtext",
          "id": "richtext",
          "label": "Richtext"
        },
        {
          "type": "html",
          "id": "html",
          "label": "html"
        }
      ]
    },
    {
      "type": "share",
      "name": "t:sections.main-product.blocks.share.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "share_label",
          "label": "t:sections.main-product.blocks.share.settings.text.label",
          "default": "Share"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.share.settings.featured_image_info.content"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.share.settings.title_info.content"
        }
      ]
    },
    {
      "type": "custom_liquid",
      "name": "t:sections.main-product.blocks.custom_liquid.name",
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.label",
          "info": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.info"
        }
      ]
    },
    {
      "type": "collapsible_tab",
      "name": "t:sections.main-product.blocks.collapsible_tab.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Collapsible tab",
          "info": "t:sections.main-product.blocks.collapsible_tab.settings.heading.info",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.heading.label"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.content.label"
        },
        {
          "type": "page",
          "id": "page",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.page.label"
        },
        {
          "type": "select",
          "id": "icon",
          "options": [
            {
              "value": "none",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
            },
            {
              "value": "box",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
            },
            {
              "value": "chat_bubble",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
            },
            {
              "value": "check_mark",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
            },
            {
              "value": "dryer",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
            },
            {
              "value": "eye",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
            },
            {
              "value": "heart",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
            },
            {
              "value": "iron",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
            },
            {
              "value": "leaf",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
            },
            {
              "value": "leather",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
            },
            {
              "value": "lock",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
            },
            {
              "value": "map_pin",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
            },
            {
              "value": "pants",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
            },
            {
              "value": "plane",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
            },
            {
              "value": "price_tag",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
            },
            {
              "value": "question_mark",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
            },
            {
              "value": "return",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
            },
            {
              "value": "ruler",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
            },
            {
              "value": "shirt",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
            },
            {
              "value": "shoe",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
            },
            {
              "value": "silhouette",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
            },
            {
              "value": "star",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
            },
            {
              "value": "truck",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
            },
            {
              "value": "washing",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
            }
          ],
          "default": "check_mark",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.label"
        }
      ]
    },
    {
      "type": "ISO",
      "name": "ISO",
      "settings": [
        {
          "type": "html",
          "id": "iso_code",
          "label": "Iso code"
        },
        {
          "type": "text",
          "id": "text",
          "label": "text"
        },
        {
          "type": "html",
          "id": "iso_1",
          "label": "Iso 1"
        },
        {
          "type": "text",
          "id": "text_1",
          "label": "text 1"
        },
        {
          "type": "html",
          "id": "iso_2",
          "label": "Iso 2"
        },
        {
          "type": "text",
          "id": "text_2",
          "label": "text 2"
        },
        {
          "type": "html",
          "id": "iso_3",
          "label": "Iso 3"
        },
        {
          "type": "text",
          "id": "text_3",
          "label": "text 3"
        },
        {
          "type": "html",
          "id": "iso_4",
          "label": "Iso 4"
        },
        {
          "type": "text",
          "id": "text_4",
          "label": "text 4"
        },
        {
          "type": "html",
          "id": "iso_5",
          "label": "Iso 5"
        },
        {
          "type": "text",
          "id": "text_5",
          "label": "text 5"
        }
      ]
    },
    {
      "type": "list-payment",
      "name": "list-payment",
      "limit": 1,
      "settings": [
        {
          "type": "html",
          "id": "iso_code",
          "label": "Iso code"
        }
      ]
    },
    {
      "type": "popup",
      "name": "t:sections.main-product.blocks.popup.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Pop-up link text",
          "label": "t:sections.main-product.blocks.popup.settings.link_label.label"
        },
        {
          "id": "page",
          "type": "page",
          "label": "t:sections.main-product.blocks.popup.settings.page.label"
        }
      ]
    },
    {
      "type": "rating",
      "name": "t:sections.main-product.blocks.rating.name",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.rating.settings.paragraph.content"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Menu section"
    }
  ]
}
{% endschema %}